<template>
<div class="productclass-page">
  <el-row>
    <el-col>
      <!-- 头部搜索框------------------------------------------------------------------------------------->
      <div class="header">
        <el-form :inline="true">
          <el-form-item label="区域搜索：">
            <el-input v-model="formInline" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="grid-content">
      <!--新建按钮 ---------------------------------------------------------------------------------->
        <el-button
          class="btn"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="createdFn">
          新建
        </el-button>
      <!--弹出框Form （遮罩层） -------------------------------------------------------------------------------- -->
        <el-dialog :title="!isAdd ? '修改商品类型' : '新增商品类型'" :visible.sync="dialogFormVisible">
          <el-form :model="ruleForm" :rules="rules">
            <el-form-item label="商品类型名称:" prop="className">
              <el-input
                v-model="ruleForm.className"
                placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" center: true>
            <el-button
              class="cancel"
              @click="cancelFn">
              取 消
            </el-button>
            <!-- a:新建 （确定1）按钮
                 b:修改 （确定2） 按钮 -->
            <el-button
              v-if="str==='a'"
              class="submit"
              type="primary"
              @click="openChangeFn">确 定1
            </el-button>
            <el-button
              v-if="str==='b'"
              class="submit"
              type="primary"
              @click="editChangeFn">确 定2
            </el-button>
            </div>
        </el-dialog>
      <!--商品表单 ------------------------------------------------------------------------------- -->
        <!--el-table-column 列   label 列名  prop配置一列的值（接口数据)-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type='index' label="序号" width="120px" prop="classId"></el-table-column>
        <el-table-column label="商品类型名称" prop="className"></el-table-column>
        <el-table-column label="操作" prop="parentId">
      <!-- 作用域插槽 -->
      <!-- elementUI 文档：obj中有两个常用的属性 $index下标，row一行的数据对象 （遍历时的一个item） -->
      <!-- {{obj.$index}} {{obj.row}}-->
      <template #default="obj">
        <el-button type="primary" @click="editFn(obj.row.classId)">修改</el-button>
        <el-button type="danger" @click="delFn(obj.row.classId)">删除</el-button>
      </template>
        </el-table-column>
      </el-table>
      <!-- 分页-------------------------------------------------------------------------------- -->
      <!-- current-change ： currentPage （当前页）改变时会触发 -->
      <el-pagination
         @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-count="+totalPage"
         :pager-count="5"
         layout="slot,->,prev, next"
         prev-text="上一页"
         next-text="下一页">
         <span>共{{totalCount}}条记录 第 {{pageIndex}} / {{totalPage}} 页</span>
       </el-pagination>
      <!-- end-------------------------------------------------------------------------------- -->
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
// 引入商品相关的接口
import { getClassSearch, getClassNewOpen, getClassEdit, getClassDelete } from '@/api/goods'
export default {
  name: 'goodsform-page',
  data () {
    return {
      id: 1,
      // <!-----头部搜索框---------------------------------->
      formInline: '',
      // <!-----新建按钮---（空）---------------------------->
      // <!----弹出框Form-（遮罩层）------------------------->
      isAdd: true,
      dialogFormVisible: false,
      ruleForm: {
        className: ''
      },
      rules: {
        className: [
          {
            required: true,
            message: '请输入商品类型名称',
            trigger: ['blur', 'change']
          },
          {
            min: 0,
            max: 10,
            message: '商品类型名称长度在 0 到 10 个字符',
            trigger: 'blur'
          }
        ]
      },

      // a:新建；b:修改
      arr: ['a', 'b'],
      str: '',

      // （遮罩层）新建 确定按钮
      changeFnId: '',
      // （遮罩层）修改 确定按钮
      // <!----商品表单------------------------->
      tableData: [],
      // <!----分页----------------------------------->
      totalPage: 0, // 总页数
      currentPage: 0,
      className: '', // 商品类型名称
      totalCount: 1, // 总页数
      pageIndex: 1, // 当前页的索引号
      pageSize: 10 // 一页的条数
    }
  },
  created () {
    this.initDataClassSearch()
    console.log(this)
  },
  methods: {
    // 1、封装获取商品类型的搜索接口数据(查)
    async initDataClassSearch () {
      const res = await getClassSearch(
        {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          className: this.formInline
        }
      )
      console.log(res)
      this.tableData = res.currentPageRecords
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
    },
    // 2、（增）
    async initDataClassAdd () {
      const res = await getClassNewOpen(this.ruleForm)
      console.log(res)
    },
    // 3、（改）
    async initDataClassEidt () {
      const res = await getClassEdit(this.id, this.ruleForm)
      console.log(res)
    },
    // 4、（删）
    async initDataClassDelete (id) {
      const res = await getClassDelete(id)
      console.log(res)
    },

    // <!-----头部搜索框---------------------------------->
    onSubmit () {
      this.initDataClassSearch()
    },
    // <!-----新建按钮---------------------------->
    createdFn () {
      this.ruleForm.className = ''
      this.dialogFormVisible = true
      this.str = this.arr[0]
    },
    // <!----弹出框Form-（遮罩层）-------------------------
    cancelFn () {
      this.dialogFormVisible = false
    },
    // （遮罩层）新建 确定按钮a
    openChangeFn () {
      this.initDataClassAdd()
      this.dialogFormVisible = false
      this.ruleForm.className = '' // 重置表单
      this.initDataClassSearch() // 调用渲染页面（搜索接口）的链接
    },

    // （遮罩层）修改 确定按钮b
    editChangeFn () {
      this.initDataClassEidt()
      this.dialogFormVisible = false
      this.ruleForm.className = '' // 重置表单
      this.initDataClassSearch() // 调用渲染页面（搜索接口）的链接
    },
    // <!----商品表单   // 点击修改和删除的按钮拿到相对应的id（classId）------------------------->
    editFn (id) {
      console.log(id)
      this.dialogFormVisible = true
      this.str = this.arr[1]
      this.id = id
      this.isAdd = false
      const num = this.tableData.find(item => item.classId === id)
      this.ruleForm.className = num.className
      this.initDataClassSearch() // 调用渲染页面（搜索接口）的函数
    },
    async delFn (id) {
      // console.log(id);
      this.dialogFormVisible = false
      await this.initDataClassDelete(id)
      this.initDataClassSearch()
    },

    // <!----分页----------------------------------->
    handleCurrentChange (e) {
      // console.log(a); 这里a形参拿到的是当前的页数
      this.pageIndex = e
      this.initDataClassSearch()
    }
  }

}
</script>

<style lang="scss" scoped>

.el-row {
  margin-bottom: 10px;
::v-deep .el-dialog {
  border-radius: 10px;
  width: 35%;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  .el-button.btn{
    width: 80px !important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) ;
    border: none;
  }
  .el-button.submit{
    border: none;
    background: linear-gradient(135deg, #ff9743, #ff5e20) ;
  }
}
.el-form{
  display: flex;
    justify-content: center;
    align-items: center;
::v-deep .el-form-item__content {
      display: flex;
    }
}
.header {
  background-color: #fff;
  display: flex;
  height: 64px;
  align-items: center;
  margin-bottom: 25px;
  padding-left: 17px;
  .el-form-item {
    display: flex;
    margin-bottom: 0px;
  }
  .el-button {
    min-width: 80px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
  }
  ::v-deep .el-input__inner {
    height: 36px;
  }
}
.dialog-footer {
  text-align: center;
   .cancel {
    background-color: #fbf4f0;
    border: none;
    color: #655b56;
  }
   .el-input__inner{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #d8dde3;
    color: #606266;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;

::v-deep .el-button .cancel  {
    background-color: #fbf4f0;
    border: none;
    color: #655b56;
    }
  }
}
.el-pagination {
   span {
     font-size: 16px!important;
    color: #dbdfe5!important;
  }
   .btn-prev {
    width: 100px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
}
</style>
